<html 	xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:ui="http://java.sun.com/jsf/facelets" 
		xmlns:f="http://java.sun.com/jsf/core" 
		xmlns:h="http://java.sun.com/jsf/html" 
		xmlns:p="http://primefaces.org/ui">
		
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
		
	<ui:define name="content">
		
		<!-- Element Primefaces extensible contenant les champs de création des nouveaux employés -->
   		<p:accordionPanel>  
    		<p:tab title="Créer un nouvel employé">  
    			<h:form>  
    				<p:panel header="Validate">  
        			<p:messages />  
        			
        			<!-- Définition du PanelGrid contenant tous les champs de création du nouvel employé -->
        			<h:panelGrid columns="3" cellpadding="5"> 
        
        				<!-- Champ "User name" -->
        				<h:outputLabel for="username" value="User name" />  
            			<p:inputText id="username" value="#{userAddition.username}" label="User name"/>  
           				<p:message for="username" />  
        
        				<!-- Champ "Password" -->
        				<h:outputLabel for="password" value="Password" />  
            			<p:inputText id="password" value="#{userAddition.password}" label="Password"/>  
           				<p:message for="password" />
           				
         				<!-- Champ "First name" -->
            			<h:outputLabel for="firstname" value="First name" />  
            			<p:inputText id="firstname" value="#{userAddition.firstname}" label="First name"/>  
            			<p:message for="firstname" />  
             
             			<!-- Champ "Last name" -->
			            <h:outputLabel for="lastname" value="Last name" />  
			            <p:inputText id="lastname" value="#{userAddition.lastname}" label="Last name"/>  
			            <p:message for="lastname" />            
            
            			<!-- Champ "E mail" -->
                     	<h:outputLabel for="email" value="Adresse email" />  
            			<p:inputText id="email" value="#{userAddition.email}" label="Adresse email"/>  
            			<p:message for="email" />
            
           				<!-- Champ "Age" -->
           		 		<h:outputLabel for="age" value="Age" />  
            			<p:inputText id="age" value="#{userAddition.age}" label="Age"/>  
            			<p:message for="age" />  
  
        			</h:panelGrid>  
  
  					<!-- Bouton appelant la méthode addEmployee() du bean "UserAdditionBean"
  					permettant d'insérer un nouvel utilisateur -->
        			<p:commandButton value="Créer" ajax="false" icon="ui-icon-check" validateClient="true" action="#{userAddition.addEmployee}"/>  
        
        		</p:panel>  
        	</h:form>  
    	</p:tab>
    </p:accordionPanel>
                
    		
		<!-- Section d'affichage des employés déjà présents en base de données -->
 		<h:form id="form">

				<p:growl id="messages" showDetail="true" />
				
				<p:dataTable var="emp" value="#{userTableBean.userList}" id="userList" editable="true">

					<f:facet name="header"> Listes des employés de l'entreprise </f:facet>

					<p:ajax event="rowEdit" listener="#{userTableBean.onEdit}" update=":form:messages" />
					<p:ajax event="rowEditCancel" listener="#{userTableBean.onCancel}" update=":form:messages" />

					<p:column headerText="User name" style="width:30%">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{emp.empUsername}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{emp.empUsername}" style="width:100%" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					
					<p:column headerText="Last name" style="width:30%">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{emp.empLastname}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{emp.empLastname}" style="width:100%" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="First name" style="width:30%">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{emp.empFirstname}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{emp.empFirstname}" style="width:100%" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="Password" style="width:30%">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{emp.empPassword}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{emp.empPassword}" style="width:100%" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					
					<p:column headerText="E-mail" style="width:30%">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{emp.empEmail}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{emp.empEmail}" style="width:100%" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="Age" style="width:20%">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{emp.empAge}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{emp.empAge}" style="width:100%" label="Year" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="Date d'embauche" style="width:20%">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{emp.empIndate}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{emp.empIndate}" style="width:100%" label="Year" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column style="width:6%">
						<p:rowEditor />
					</p:column>

				</p:dataTable>
			</h:form>
		
		</ui:define>
	</ui:composition>
</html>

